<template>
    <div style="height:calc(100% - 40px)">
        <!-- 频率流量切换按钮 -->

        <!-- 主体部分 -->
        <div class="timeBox">
            <el-form ref="ruleForm" class="shortform" :model="ruleForm" label-width="auto" label-position="top">
                <span class="sechsp">降雨时段</span>
                <el-form-item label="">
                    <el-date-picker v-model="ruleForm.Time" type="datetimerange" prefix-icon="el-icon-date"
                        start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%" range-separator="至"
                        format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" @change="TimeChange" />
                </el-form-item>
            </el-form>
        </div>
        <div class="collapse_table">
            <ul class="LeftCardList">
                <li v-for="(item, i) in RvcdTimeList" :key="i" class="CardListBoxL" :name="i"
                    :class="{ CardListBoxLActive: isActive === i }" @click="CardClick(i, item)">

                    <div class=" CardListTitleL">
                        {{ $moment(item.perioD_END).format("YYYY-MM-DD HH:mm") }}实时模拟
                        <div class="btnPlay">
                            <i class="bofang " /> 数据播放
                        </div>
                    </div>
                    <div class="RiverFlow">
                        <div class="RiverFlowChart">
                            <!-- <div class="CardLittleTitleL">河流流量统计</div> -->
                            <div class="CardLittleTitleL">频度</div>
                            <div :id="'StatisticsChart' + i" class="StatisticsChart" />
                        </div>
                        <div class="RiverFlowText">
                            <div><i class="FlowColorLevel1" />{{ item.level7 }}<span>{{ item.level7Count }}</span></div>
                            <div><i class="FlowColorLevel2" />{{ item.level6 }}<span>{{ item.level6Count }}</span></div>
                            <div><i class="FlowColorLevel3" />{{ item.level5 }}<span>{{ item.level5Count }}</span></div>
                            <div><i class="FlowColorLevel4" />{{ item.level4 }}<span>{{ item.level4Count }}</span></div>
                            <div><i class="FlowColorLevel5" />{{ item.level3 }}<span>{{ item.level3Count }}</span></div>
                            <div><i class="FlowColorLevel6" />{{ item.level2 }}<span>{{ item.level2Count }}</span></div>
                            <div><i class="FlowColorLevel7" />{{ item.level1 }}<span>{{ item.level1Count }}</span></div>
                        </div>
                    </div>
                    <!-- <div class="CardLittleTitleL">淹没情况统计</div> -->
                    <el-row class="Submerge">
                        <el-col :span="12">
                            <div class="SubmergeList SubmergeListBg1">
                                <span class="SubmergeListBg ">{{ item.measure || 0 }}</span>
                                <span class="submersp">淹没面积(km²)</span>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="SubmergeList SubmergeListBg2">
                                <span class="SubmergeListBg ">{{ item.adcdCount || 0 }}</span>
                                <span class="submersp">影响村庄(个)</span>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="SubmergeList SubmergeListBg3">
                                <span class="SubmergeListBg ">{{ item.htCount || 0 }}</span>
                                <span class="submersp">影响户数(户)</span>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="SubmergeList SubmergeListBg4">
                                <span class="SubmergeListBg ">{{ item.pCount || 0 }}</span>
                                <span class="submersp">影响人口数(人)</span>
                            </div>
                        </el-col>
                    </el-row>
                </li>
                <infinite-loading ref="infiniteLoading" direction="100" @infinite="infiniteHandler">
                    <span slot="no-more"> &nbsp; &nbsp; </span>
                    <template v-if="RvcdTimeList.length <= 0">
                        <div slot="no-results" class="notAvailable">
                            暂无数据
                        </div>
                    </template>
                    <div v-else slot="no-results"> &nbsp; &nbsp;</div>

                </infinite-loading>
            </ul>
        </div>

    </div>
</template>

<script>
import {
    GetStatisticsList,
    GetStatisticsFlowList
} from '@/api/zyx.js'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'ShortProLeft',
    components: {},
    data() {
        return {
            timebeg: this.$moment(this.$store.getters.startTimeCommon).format('HH:mm:ss'),
            timeend: this.$moment(this.$store.getters.endTimeCommon).format('HH:mm:ss'),
            ruleForm: {
                strBegin: this.$moment().subtract(3, 'hour').format('YYYY-MM-DD HH:mm'),
                strEnd: this.$moment().format('YYYY-MM-DD HH:mm'),
                Time: [this.$store.getters.startTimeCommon, this.$store.getters.endTimeCommon],
                wswscd: ''
            },
            DatalIst: {
                wswscd: '',
                dtBegin: this.$store.getters.startTimeCommon,
                dtEnd: this.$store.getters.endTimeCommon,
                page: '1',
                limit: '10'
            },
            RvcdTimeList: [],
            myChart: {},
            isActive: 0,
            floodAnalysisMode: 'rate',
            dataold: {}
        }
    },
    computed: {
        ...mapGetters({
            basin: 'basin'
        })
    },
    watch: {
        'basin': {
            immediate: true,
            deep: true,
            handler(val) {
                this.DatalIst.wswscd = val
                this.resetList()
            }
        }
    },
    beforeDestroy() {
        console.log('4588');
        this.$eventBus.$off('EB_YB_HS_Card_Click')
    },
    created() {

        this.$eventBus.$on('FloodAnalysisMode', res => {
            this.floodAnalysisMode = res
            this.resetList()
        })
    },
    mounted() { },
    methods: {
        // 加载更多
        infiniteHandler($state) {
            this.GetData($state)
        },
        // 重置
        resetList() {
            this.DatalIst.page = 1
            this.RvcdTimeList = []
            this.dataold = {}
            this.$nextTick(() => {
                if (this.$refs.infiniteLoading) {
                    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
                } else {
                    console.log('InfiniteLoading---没有')
                }
            })
        },
        CardClick(idx, data) {
            // 传时间
            this.$eventBus.$emit('EB_YB_HS_Card_Click2', {
                perioD_END: data.perioD_END,
            })
            this.isActive = idx
            this.dataold = {
                'strEnd': data.perioD_END,
                'fnid': data.fnid
            }
            console.log(data);
            this.$store.commit("HSFXFZCDATE", data.fnid); //防治村数据时间
            if (this.$store.getters.rightFold) {
                this.$store.dispatch('rightFold', false)
            }

            this.$eventBus.$emit('EB_YB_HS_Card_Click', {
                fnid: data.fnid,
                perioD_END: data.perioD_END,
                wswscd: this.DatalIst.wswscd,
                floodAnalysisMode: this.floodAnalysisMode
            })
            // 洪水分析-影响村庄图标
            this.$eventBus.$emit('EB_YB_HS_Card_Click1', {
                fnid: data.fnid,
                perioD_END: data.perioD_END,
                wswscd: this.DatalIst.wswscd,
                floodAnalysisMode: this.floodAnalysisMode
            })

        },
        TimeChange(val) {
            if (val) {
                this.DatalIst.dtBegin = val[0]
                this.DatalIst.dtEnd = val[1]
                this.ruleForm.Time = val
                this.$store.dispatch('startTimeCommon', val[0])
                this.$store.dispatch('endTimeCommon', val[1])
                this.resetList()

            }
        },
        GetData($state) { // 列表页
            if (this.floodAnalysisMode === 'rate') {
                GetStatisticsList(this.DatalIst).then((res) => {
                    if (res.isSuccess) {
                        this.SuccessFun($state, res)
                    } else {
                        this.$message.error(res.message)
                        $state.complete() // 加载完成的状态
                    }
                })
            } else {
                GetStatisticsFlowList(this.DatalIst).then((res) => {
                    if (res.isSuccess) {
                        this.SuccessFun($state, res)
                    } else {
                        this.$message.error(res.message)
                        $state.complete() // 加载完成的状态
                    }
                })
            }
        },
        SuccessFun($state, res) {
            if ($state) {
                if (!res.data.length > 0) {
                    $state.complete() // 加载完成的状态
                } else {
                    const arr = res.data
                    this.RvcdTimeList = [...this.RvcdTimeList, ...arr]

                    if (this.DatalIst.page === 1) {
                        this.dataold = {
                            'strEnd': res.data[0].perioD_END,
                            'fnid': res.data[0].fnid
                        }
                        console.log('数据》', this.dataold);
                        this.$eventBus.$emit('EB_YB_HS_Card_Click2', {
                            perioD_END: res.data[0].perioD_END,
                        })
                        this.$store.commit("HSFXFZCDATE", res.data[0].perioD_END);

                        this.isActive = 0
                        this.$eventBus.$emit('EB_YB_HS_Card_Click', {
                            fnid: res.data[0].fnid,
                            perioD_END: res.data[0].perioD_END,
                            wswscd: this.DatalIst.wswscd,
                            floodAnalysisMode: this.floodAnalysisMode
                        })
                        this.$eventBus.$emit('EB_YB_HS_Card_Click1', {
                            fnid: res.data[0].fnid,
                            perioD_END: res.data[0].perioD_END,
                            wswscd: this.DatalIst.wswscd,
                            floodAnalysisMode: this.floodAnalysisMode
                        })
                    }
                    if (res.data.length < this.DatalIst.limit) {
                        $state.complete() // 加载完成的状态
                    } else {
                        $state.loaded() // 加载中的状态
                    }
                }
                this.DatalIst.page++
            } else {
                this.RvcdTimeList = res.data
                // $state.complete()   //加载完成的状态
            }
            const namflg = this.floodAnalysisMode === 'rate' ? '遇' : '0m'
            setTimeout(() => {
                if (this.RvcdTimeList.length > 0) {
                    this.$emit('buttonEvent', true)
                    for (var i = 0; i < this.RvcdTimeList.length; i++) {
                        const pieData = []
                        const arrList = []
                        for (const k in this.RvcdTimeList[i]) {
                            arrList.push(this.RvcdTimeList[i][k])
                        }
                        const arlen = arrList.length
                        for (var j = 0; j < arlen - 1; j++) {
                            const nam = arrList[j] + ''
                            if (nam.indexOf(namflg) == '-1') {
                                continue
                            }
                            pieData.push({
                                value: arrList[j + 1],
                                name: arrList[j]
                            })
                            // j += 1
                        }
                        this.getPieEchart(pieData, 'StatisticsChart' + i)
                    }
                } else {
                    this.$emit('buttonEvent', false)
                }
            }, 1000)
        },
        getPieEchart(chartData, chartId) {
            const colorList = ['#7FD165', '#309EF3', '#E8E500', '#F2A408', '#EF3C45', '#964FD2', '#C93EC0']
            // 饼图
            const option = {
                title: {
                    // 设置饼图标题，位置设为顶部居中
                    text: ''
                },
                color: colorList,
                series: [{
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: ['50%', '90%'], // 饼图半径
                    center: ['50%', '50%'],
                    // roseType: 'area',
                    label: {
                        show: false,
                        color: '',
                        formatter: '{c}', // b代表名称，c代表对应值，d代表百分比
                        overflow: 'breakAll',
                        distanceToLabelLine: 1

                    },
                    labelLine: { // 指示线样式设置
                        show: false,
                        normal: {
                            length: 10, // 设置指示线的长度
                            length2: 5 // 修改引导线第二段的长度
                        }
                    },
                    itemStyle: {
                        borderRadius: 0
                    },
                    data: chartData.map((item, index) => {
                        item.label = {
                            color: colorList[index]
                        }
                        return item
                    })
                }]
            }
            this.myChart = this.$echarts.init(document.getElementById(chartId))
            this.myChart.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.timeBox {
    font-size: 14px;
    color: #649ff4;
    margin: 10px 0;
    // padding: 0 10px;
}

.collapse_table {
    height: calc(100% - 80px) !important;
    max-height: calc(100% - 80px) !important;
    margin-right: -10px;
    padding-bottom: 0px;
}

.LeftCardList {
    height: 100%;
    overflow: auto;
    padding-right: 10px;

    .CardListBoxL {
        width: 100%;
        padding: 10px;
        padding-top: 3px;
        box-sizing: border-box;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: bold;
        background: url("~@/assets/imgNew/hong.png") no-repeat top center;
        background-size: 100% 100%;

        .CardListTitleL {
            color: #FFE957;
            line-height: 34px;
            position: relative;
            font-size: 16px;
            border-bottom: 2px solid #00A0DB;
            height: auto;

            .btnPlay {
                color: #00F6FF;
                text-indent: 0;
                position: absolute;
                padding: 0 10px 0 10px;
                line-height: 27px;
                top: 3px;
                right: 0px;
                font-size: 12px;
                background: url("~@/assets/imgNew/btnPlay.png") no-repeat;
                background-size: 100% 100%;
                font-weight: 500;
                cursor: pointer;

                .bofang {
                    float: left;
                    width: 12px;
                    height: 12px;
                    margin-top: 7px;
                    margin-right: 3px;
                    background: url("~@/assets/imgNew/bofang.png") no-repeat;
                    background-size: 100% 100%;
                }
            }
        }

        .CardLittleTitleL {
            // font-size: 12px;
            // color: #649ff4;
            color: #fff;
            line-height: 34px;
        }

        .RiverFlow {
            color: #ffffff;
            font-size: 14px;
            line-height: 24px;
            padding: 10px 0;
            display: flex;
            border-bottom: 2px solid #00A0DB;

            .RiverFlowChart {
                width: 50%;

                .StatisticsChart {
                    width: 100%;
                    height: 200px;
                    // background: url("~@/assets/newimg/chartBg.png") no-repeat center,
                    // 	url("~@/assets/newimg/chartBg1.png") no-repeat center;
                    // background-size: 100% auto, 30% auto;
                }
            }

            .RiverFlowText {
                width: 50%;
                font-size: 12px ip !important;
                box-sizing: border-box;
                opacity: .9;

                div {
                    overflow: hidden;
                    background: rgba(3, 18, 28, 0.63);
                    margin-bottom: 1px;
                    padding: 0 10px;
                    margin-top: 3px;
                    line-height: 32px;
                    position: relative;
                    font-size: 12px;

                    i {
                        display: inline-block;
                        width: 12px;
                        height: 12px;
                        vertical-align: middle;
                        margin-right: 6px;
                    }

                    span {
                        float: right;
                    }
                }

                div:last-child {
                    border-bottom: none;
                }
            }
        }

        .Submerge {
            color: #ffffff;
            font-size: 12px;
            text-align: left;
            // display: -webkit-flex;
            // display: flex;

            .SubmergeList {
                // width: 100%;
                height: 76px;
            }

            .SubmergeListBg {
                display: block;
                font-weight: bold;
                font-size: 24px;
                height: 30px;
                color: #00FFFF;
                width: 60%;
                margin-left: 40%;
                padding-top: 6px;
            }

            .submersp {
                display: block;
                color: #fff;
                width: 60%;
                margin-left: 40%;
            }

            .SubmergeListBg1 {
                background: url("~@/assets/imgNew/yanmo.png") no-repeat bottom center;
                background-size: auto 95%;
            }

            .SubmergeListBg2 {
                background: url("~@/assets/imgNew/cunzhua.png") no-repeat bottom center;
                background-size: auto 95%;
            }

            .SubmergeListBg3 {
                background: url("~@/assets/imgNew/hushu.png") no-repeat bottom center;
                background-size: auto 95%;
            }

            .SubmergeListBg4 {
                background: url("~@/assets/imgNew/renkou.png") no-repeat bottom center;
                background-size: auto 95%;
            }


        }

    }

    .CardListBoxL:hover,
    .CardListBoxLActive {
        background: url("~@/assets/imgNew/hongact.png") no-repeat top center;
        background-size: 100% 100%;
    }
}

.titleList span,
.stationLst ul li span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.noData {
    font-size: 16px;
    font-weight: bold;
    color: #3959a1;
    text-align: center;
    margin-top: 20%;
}

@media (max-width: 1470px) {
    .LeftCardList {
        .RiverFlowText {
            div {
                i {
                    width: 10px !important;
                    height: 10px !important;
                }
            }
        }
    }
}

.shortform {
    .sechsp {
        display: inline-block;
        margin-bottom: 5px;
        font-size: 14px;
        color: #fff;
        opacity: 0.8;
    }
}

.notAvailable {
    padding-top: 90%;
    font-weight: 700;
    background: url(../../../../assets/newimg/notAvailableData.png) no-repeat;
    background-position: center 85%;
    background-size: auto;
}
</style>
